<template>
  <div class="coupon">
    <div class="item">
      <div class="title"><span>*</span>优惠券名称</div>
      <div class="inp">
        <el-input placeholder="请输入优惠券名称" v-model="parmas.couponName"></el-input>
      </div>
    </div>
    <div class="item">
      <div class="title"><span>*</span>优惠方式</div>
      <div class="inp">
        <div>
          <el-select v-model="parmas.preferentialWay" placeholder="请选择优惠方式" size="large">
            <el-option
              v-for="item in preferentialWayOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="s_title">
          <span>金额</span>
          <div><el-input palceholder="请输入金额" v-model="parmas.couponPrice"></el-input></div>
          <span>元</span>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="title"><span>*</span>优惠券类型</div>
      <div class="inp">
        <el-select v-model="parmas.couponType" placeholder="请选择优惠券类型" size="large">
          <el-option
            v-for="item in couponTypeOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="item">
      <div class="title"><span>*</span>优惠券有效期</div>
      <div class="inp">
        <el-date-picker
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        v-model="parmas.termOfValidity"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      </div>
    </div>
    <div class="item footer-btn">
      <el-button size="small" type="primary" @click="confirm">
        确定
      </el-button>
      <el-button size="small" type="danger" @click="emits('cancel')">
        取消
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from "vue";
const parmas = ref({
  couponName: "",
  preferentialWay: "",
  couponPrice: "",
  couponType: "",
  termOfValidity: ""
})
const preferentialWayOption = [
  {value: "直减券", label: "直减券"},
  {value: "折扣券", label: "折扣券"},
  {value: "满减券", label: "满减券"}
]
const couponTypeOption = [
  {value: "通用优惠券", label: "通用优惠券"},
  {value: "新人优惠券", label: "新人优惠券"}
]
const confirm = () => {
  emits('confirm', parmas.value)
}

const emits = defineEmits(['confirm', 'cancel'])
</script>

<style lang="scss" scoped>
.coupon {
  .item {
    display: flex;
    padding-bottom: 15px;
    padding-left: 10%;

    .title {
      width: 120px;
      padding-right: 15px;
      text-align: end;
      &>span {
        color: #f56c6c;
        margin-right: 4px;
      }
    }
    .inp {
      width: 60%;
    }
    .s_title {
      padding-top: 10px;
      display: flex;
      align-items: center;
      &>div {
        margin: 0 10px;
      }
    }
    .el-select, .el-date-editor--daterange {
      width: 100%;
    }
  }
  .footer-btn {
    margin-top: 50px;
    justify-content: center;
    background: #f0f4f7;
    padding-top: 15px;
    border-top: 1px solid #cfcfcf;
  }
}
</style>
